function RightMenu(props) {
    if (!window.antd?.Popover) {
        return null
    }

    const {Popover} = window.antd

    const {root = false, title, onClick, items, style} = props

    const styles = {
        width: 145,
        height: 30,
        lineHeight: '30px',
        cursor: 'pointer',
        padding: 0,
        ...style,
    }

    return items?.length ? (
        <Popover
            onVisibleChange={() => undefined}
            placement="rightTop"
            destroyTooltipOnHide={false}
            content={(
                <div>
                    {items?.map(item => (
                        <RightMenu title={item.title} onClick={item.onClick} items={item.children}/>
                    ))}
                </div>
            )}
        >
            <div
                className={root ? '' : 'ant-menu-item'}
                style={styles}
                onClick={onClick}
            >
                <span>{title}</span>
                <span style={{float: 'right', color: '#666'}}>&gt;</span>
            </div>
        </Popover>
    ) : (
        <div
            className={root ? '' : 'ant-menu-item'}
            style={styles}
            onClick={onClick}
        >
            {title}
        </div>
    )
}

export default RightMenu